<template>
  <div class="container">
    <el-card shadow="hover"
             class="mgb20">
      <div class="user-info">
        <img src="static/img/img.jpg"
             class="user-avator"
             alt />
        <div class="user-info-cont">
          <div class="user-info-name">
            <span>欢迎回来，{{managerInfos.realname}}</span>
          </div>
          <img src="static/img/person.png"
               class="user-img"
               alt />
          <div>超级管理员</div>
        </div>
        <img src="static/img/time.png"
             class="clock"
             alt />
        <div class="now-time">{{dateFormat(date)}}</div>
      </div>

      <div class="user-info-list">
        上次登录时间：
        <span>{{managerInfos.lastLoginTime | formatDate}}</span>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Home",
  data () {
    return {
      date: new Date() //获取当前时间
    };
  },
  computed: {
    ...mapState({
      managerInfos: "managerInfos"
    })
  },
  mounted () {
    var _this = this; //声明一个变量指向vue实例this,保证作用域一致
    this.timer = setInterval(function () {
      _this.date = new Date(); //修改数据时间date
    }, 1000);
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer); //在关闭页面时清除定时器
    }
  },
  methods: {
    //时间格式化
    dateFormat (time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes;
    }
  }
};
</script>

<style scoped>
.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
  width: 200px;
}

.user-img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  float: left;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #409eff;
  margin-bottom: 10px;
}

.user-info-cont span {
  color: #222;
}

.clock {
  width: 25px;
  height: 25px;
  margin: 10px;
}

.now-time {
  font-size: 22px;
  margin-right: 50px;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}
</style>